<template>
	<div class="userpage">
		<!-- <div class="page-title">
			<img src="../assets/img/ico.png" alt="" srcset="">
			<p>管理员</p>
		</div> -->
		<div class="user-head">
			<div class="search"></div>
			<div class="user-do">
				<button class="btn2" @click="visible=true">添加</button>
			</div>
		</div>
		<div class="list-box" id="list-box">
			<el-table ref="usersTable" :data="list" v-loading="loading" :height="height" stripe style="width: 100%;"
				header-row-class-name="headcss">
				<el-table-column prop="UserName" label="账号" align="center"></el-table-column>
				<el-table-column prop="Pwd" label="密码" align="center"></el-table-column>
				<el-table-column prop="Role" label="权限" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="140">
					<template slot-scope="scope">
						<el-button @click.native.prevent="_delAdmin(scope.row.UserName)" type="text" size="medium">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="添加管理员" :visible.sync="visible">
			<el-form :model="form">
				<el-form-item label="账号" :label-width="formLabelWidth">
					<el-input v-model="form.UserName"></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth">
					<el-input v-model="form.Pwd"></el-input>
				</el-form-item>
				<el-form-item label="权限" :label-width="formLabelWidth">
					<el-select v-model="form.Role" placeholder="请选择权限" style="width: 100%;">
						<el-option label="查询权限" value="2"></el-option>
						<el-option label="操作权限" value="1"></el-option>
						<el-option label="视频审核" value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="_addAdmin()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		queryAdmin,
		addAdmin,
		delAdmin
	} from '@/utils/api'
	export default {
		data() {
			return {
				visible:false,
				height: '100%',
				loading: false,
				list: [],
				formLabelWidth:120,
				form:{
					UserName:'',
					Pwd:'',
					Role:'1'
				}
			}
		},
		mounted() {
			this._queryAdmin()
		},
		methods: {
			// 基础查询
			async _queryAdmin() {
				this.loading = true
				let {
					data,
					response
				} = await queryAdmin({})
				this.loading = false
				this.list = data
			},
			//拉黑操作
			async _addAdmin() {
				
				let params = this.form
				let { data, response } = await addAdmin(params)
				if (response.errCode == 0) {
					this.$message.success('添加成功')
					this.visible = false
					this._queryAdmin()
					this.form={
						UserName:'',
						Pwd:'',
						Role:'1'
					}
				}
			},
			//删除
			 _delAdmin(UserName) {
				 this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				   confirmButtonText: '确定',
				   cancelButtonText: '取消',
				   type: 'warning'
				}).then( async () => {
					let params = {
						UserName: UserName
					}
					let { data, response } = await delAdmin(params)
					if (response.errCode == 0) {
						this.$message.success('删除成功')
						this._queryAdmin()
						this.$message({ type: 'success', message: '删除成功!' });
					}
				}).catch(() => {});
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.userpage {
		padding: 20px 20px 10px 20px;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.list-box {
		flex: 1;
		overflow-y: scroll;
	}

	.page-limit {
		display: flex;
		justify-content: center;
		padding-top: 10px;
	}

	.user-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20px;
	}

	.search {
		display: flex;
		align-items: center;
		width: 320px;

		.s-inp {
			height: 40px;
			display: flex;
			align-items: center;
			background: #fff;
			padding: 0 10px;
			border-radius: 5px;
			flex: 1;

			.inp {
				border: none;
				outline: none;
				flex: 1;
			}

			img {
				margin-right: 10px;
			}
		}

		button {
			width: 70px;
			height: 40px;
			background: #2389FE;
			border-radius: 5px;
			color: #fff;
			margin-left: 10px;

			&:active {
				opacity: 0.8;
			}
		}
	}

	.user-do {
		display: flex;
		align-items: center;

		.btn1 {
			width: 70px;
			height: 40px;
			background: rgba(211, 12, 63, 0.99);
			border-radius: 5px;
			color: #fff;

			&:active {
				opacity: 0.8;
			}
		}

		.btn2 {
			width: 70px;
			height: 40px;
			background: #2389FE;
			border-radius: 5px;
			color: #fff;
			margin: 0 10px;

			&:active {
				opacity: 0.8;
			}
		}

		.btn3 {
			width: 171px;
			height: 40px;
			border-radius: 5px;
			border: 1px solid #2389FE;
			color: #2389FE;
			background: #fff;

			&:active {
				border: 1px solid #15549d;
				color: #15549d;
			}
		}
	}

	.page-title {
		display: flex;
		align-items: center;
		padding-bottom: 20px;

		p {
			margin-left: 10px;
			font-size: 24px;
			color: #333333;
		}

		img {
			width: 24px;
		}
	}
</style>
<style>
	.el-table {
		border-radius: 5px;
	}

	.el-table th.el-table__cell {
		background-color: #2389FD !important;
		color: #fff;
	}

	.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
		background: #DEEEFF !important;
	}

	.el-table td.el-table__cell {
		border: none
	}

	.inp .el-input__inner {
		border: none;
		padding-left: 0;
	}
</style>